<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js"></script>
	</head>
	<body>
		<!-- v-if 指令 -->
		<div id="app">
			<p v-if="seen">现在你看到我了</p>
			<template v-if="ok">
				<h1>菜鸟教程</h1>
				<p>学的不仅是技术，更是梦想！</p>
				<p>哈哈哈，打字辛苦啊！！！</p>
			</template>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					seen:true,
					ok:true
				}
			})
		</script>
		<p>----------------------------------------------------</p>
		<!-- v-else 指令 -->
		<div id="app2">
			<div v-if="Math.random() > 0.5">
			Sorry
			</div>
			<div v-else>
				Not sorry
			</div>
		</div>
		<script>
			new Vue({
				el:'#app2'
			})
		</script>
		<p>----------------------------------------------------------</p>
		<!-- v-else-if 判断 type 变量的值： -->
		<div id="app3">
		<div v-if="type === 'A'">
		  A
		</div>
		<div v-else-if="type === 'B'">
		  B
		</div>
		<div v-else-if="type === 'C'">
		  C
		</div>
		<div v-else>
		  Not A/B/C
		</div>
	</div>
	<script>
	new Vue({
	  el: '#app3',
	  data: {
		type: 'C'
	  }
	})
	</script>
	<p>---------------------------------------------------------------</p>
	<!--  -->
	<div id="app4">
    <h1 v-show="ok">Hello!</h1>
	</div>
		
	<script>
	new Vue({
	  el: '#app4',
	  data: {
		ok: true
	  }
	})
	</script>
	</body>
</html>
